<template>
    <div class="page-container">
        <!--工具栏-->
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
            <el-form :inline="true" :model="filters" :size="size">
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="类型名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-search" :label="$t('action.search')" perms="sys:role:view" type="primary"
                               @click="findPage(null)"/>
                </el-form-item>
                <el-form-item>
                    <kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:user:add" type="primary"
                               @click="handleAdd"/>
                </el-form-item>
            </el-form>
        </div>
        <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
            <el-form :inline="true" :size="size">
                <el-form-item>
                    <el-button-group>
                        <el-tooltip content="刷新" placement="top">
                            <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="列显示" placement="top">
                            <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
                        </el-tooltip>
                    </el-button-group>
                </el-form-item>
            </el-form>
            <!--表格显示列界面-->
            <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                        @handleFilterColumns="handleFilterColumns">
            </table-column-filter-dialog>
        </div>
        <kt-table :data="pageResult" :showBatchDelete="false" :columns="filterColumns" @findPage="findPage"
                  @handleEdit="handleEdit" @handleDelete="handleDelete">
        </kt-table>

        <!-- 新增修改界面 -->
        <el-dialog :title="!dataForm.id ? '新增' : '修改'" width="40%" :visible.sync="dialogVisible"
                   :close-on-click-modal="false">
            <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="submitForm"
                     label-width="80px" :size="size" style="text-align:left;">
                <el-form-item label="类型名称" prop="cnName">
                    <el-input v-model="dataForm.cnName" placeholder="类型名称"></el-input>
                </el-form-item>
                <el-form-item label="类型值" prop="enName">
                    <el-input v-model="dataForm.enName" placeholder="类型值"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button :size="size" @click="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click="submitForm">{{$t('action.comfirm')}}</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
  import {data} from '@/contentjs/Type.js';
  export default data
</script>

<style scoped>
    .page-container {
        height: 770px;
    }
    .el-row{
        margin-top: 2em;
    }
</style>
